<template>
  <div class="">
    <el-card style="width:30%">
      <el-input v-permission="['menu:list']" v-model="filterText" placeholder="输入关键字进行过滤"/>
      <el-tree ref="tree" :data="list" :props="props" :filter-node-method="filterNode" default-expand-all class="margin-top-10">
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span :class="data.action?'el-icon-s-tools':'el-icon-menu'">{{ data.name }}</span>
          <span>
            <el-button v-permission="['menu:add']" type="text" size="mini" @click="toSave(data)">新增</el-button>
            <el-button v-permission="['menu:detail']" v-if="data.id!==0" type="text" size="mini" @click="toEdit(data)">编辑</el-button>
            <el-button v-permission="['menu:delete']" v-if="data.id!==0" type="text" size="mini" @click="remove(data)">删除</el-button>
          </span>
        </span>
      </el-tree>
    </el-card>

    <el-dialog :close-on-click-modal="false" :title="isAdd?'新增菜单':'编辑菜单'" :visible.sync="dialogFormVisible" @close="closeMenuDialog">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px">
        <el-form-item v-if="isAdd" label="父菜单名称" prop="parentName">
          {{ dataForm.parentName }}
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="dataForm.name" maxlength="20"/>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-tooltip class="item" effect="dark" content="功能菜单 对应URL为后台请求地址,常规菜单为本地页面views目录下的页面路径" placement="top">
            <el-input v-model="dataForm.url" maxlength="200" placeholder="功能菜单 对应URL为后台请求地址,常规菜单为本地页面views目录下的页面路径"/>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="权限代码" prop="permission">
          <el-input v-model="dataForm.permission" maxlength="50" placeholder="推荐使用功能名称:操作名称 例如:user:add"/>
        </el-form-item>
        <el-form-item label="图标代码" prop="icon">
          <el-select v-model="dataForm.icon" placeholder="请选择菜单图标" clearable>
            <el-option v-for="icon in icons" :key="icon" :label="icon" :value="icon"/>
          </el-select>
          <svg-icon v-if="dataForm.icon" :icon-class="dataForm.icon" class="margin-left-10"/>
        </el-form-item>
        <el-form-item label="序号" prop="seq">
          <el-input v-model.number="dataForm.seq"/>
        </el-form-item>
        <el-form-item prop="action">
          <el-checkbox v-model="dataForm.action">功能菜单</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeMenuDialog">取消</el-button>
        <el-button v-permission="['menu:add']" v-if="isAdd" type="primary" @click="save">确定</el-button>
        <el-button v-permission="['menu:edit']" v-else type="primary" @click="edit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
<script>
import { MenuService } from '@/api/AdminService'
import Notify from '@/utils/notify'

export default {
  name: 'Role',
  data() {
    return {
      props: { children: 'children', label: 'name' },
      filterText: '', list: null, isAdd: true, dialogFormVisible: false,
      icons: [],
      dataForm: {
        id: undefined, name: undefined, url: undefined,
        permission: undefined, seq: 0, parentId: 0, parentName: undefined, action: false, icon: undefined
      },
      rules: {
        name: [{ required: true, message: '菜单名称不能为空!', trigger: 'blur' }],
        seq: [{ required: true, message: '排序不能为空!', trigger: 'blur' }, { type: 'number', message: '必须是整数!', trigger: 'blur' }]
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.initList()
    this.initIcons()
  },
  methods: {
    initList() {
      MenuService.listMenus().then(result => {
        const array = []
        array.push({ id: 0, name: '根菜单', children: result })
        this.list = array
      })
    },
    initIcons() {
      const files = require.context('@/icons/svg', false, /.svg$/).keys()
      const icons = []
      files.forEach(file => {
        const index = file.indexOf('.svg')
        file = file.substring(0, index).substring(2)
        icons.push(file)
      })
      this.icons = icons
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    closeMenuDialog() {
      this.dialogFormVisible = false
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.$refs['dataForm'].clearValidate()
      })
    },
    toSave(data) {
      this.dataForm = { action: false }
      this.dataForm.parentId = data.id
      this.dataForm.parentName = data.name
      this.isAdd = true
      this.dialogFormVisible = true
    },
    save() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          MenuService.addMenu(this.dataForm).then(response => {
            Notify.success(this, '新增角色成功!')
            this.closeMenuDialog()
            this.initList()
          })
        }
      })
    },
    toEdit(data) {
      this.dataForm = Object.assign({}, data)
      this.isAdd = false
      this.dialogFormVisible = true
    },
    edit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          MenuService.editMenu(this.dataForm).then(() => {
            Notify.success(this, '更新成功!')
            this.closeMenuDialog()
            this.initList()
          })
        }
      })
    },
    remove(data) {
      this.$confirm('您确定要删除 ' + data.name + ' 的菜单吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        MenuService.deleteMenu(data.id).then(() => {
          Notify.success(this, '删除成功!')
          this.initList()
        })
      })
    }
  }
}
</script>
